import { View, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import RichText from '@/components/RichText';
import dayjs from 'dayjs';
import { Component } from 'react';
import { AtCountdown } from 'taro-ui';
import GoodsSwiper from '@/components/Swiper/index';
import BottomBtns from '@/pages/appointment/components/BottomBtns/index';
import phoneIcon from '@/assets/images/goods/phone.png';
// import SkuModal from '@/components/SkuModal';
import { getMiaoshaDetail } from '@/service/apis/home';
import './index.scss';

interface S {
  goodsDetail: any | {};
}
interface P {}

export default class Index extends Component<P, S> {
  state = {
    skuModalShow: false,
    remainTime: 0,
    goodsDetail: {},
  };
  componentDidMount() {
    const querys: any = Taro.getCurrentInstance().router?.params;
    if (querys.miaoshaId) {
      this.getMiaoshaInfo(querys.miaoshaId);
    } else {
      Taro.showToast({
        title: '缺少秒杀id',
        icon: 'none',
      });
    }
    this.getEndTime();
  }
  selectType: 'cart' | 'buy' | '' = '';
  getMiaoshaInfo = async (id: string) => {
    try {
      const { data } = await getMiaoshaDetail({
        seckill_id: id,
      });
      this.setState({
        goodsDetail: data.kill || {},
      });
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };
  onTimeUp = () => {
    Taro.showToast({
      title: '秒杀活动时间到',
      icon: 'success',
      duration: 2000,
    });
  };
  onBuy = () => {
    const querys: any = Taro.getCurrentInstance().router?.params;
    Taro.navigateTo({
      url: '/subPages/miaosha/submit/index?id=' + querys.miaoshaId,
    });
  };
  callPhone = () => {
    const { cartoon_store_mobile } = this.state.goodsDetail;
    Taro.makePhoneCall({
      phoneNumber: cartoon_store_mobile,
      fail: (err) => {
        Taro.showToast({
          title: err?.errMsg,
          icon: 'none',
        });
      },
    });
  };

  getEndTime = () => {
    const endTime = dayjs(dayjs().format('YYYY-MM-DD')).add(1, 'day').valueOf();
    const remainTime = ((endTime - dayjs().valueOf()) / 1000).toFixed(0);
    console.log('remainTime: ', remainTime);
    this.setState({
      remainTime: remainTime,
    });
  };

  render() {
    const { goodsDetail, remainTime } = this.state;
    console.log('remainTime: ', remainTime);
    return (
      <View className="goods-container">
        <View>
          <GoodsSwiper imageList={goodsDetail.gallery} />
        </View>
        <View className="miaosha-container">
          秒杀剩余时间：
          <AtCountdown
            format={{ hours: ':', minutes: ':', seconds: '' }}
            seconds={remainTime}
            onTimeUp={this.onTimeUp}
          />
        </View>
        <View className="goods-info-content">
          <View className="goods-name section">
            <View className="good-price">
              <Text className="goods-price__red">
                <Text className="price-flag">￥</Text>
                {goodsDetail.cartoon_kill_goods_price}
              </Text>
              <Text className="goods-price__gray">价格 </Text>
              <Text className="price-line">￥{goodsDetail.cartoon_goods_retail_price}</Text>
            </View>
            <View className="goods-title">{goodsDetail.cartoon_kill_goods_name}</View>
          </View>
          <View className="shop-container section">
            <View className="shop-info">
              <Image src={goodsDetail.cartoon_store_store_logo} />
              <View className="shop-content">
                <View className="shop-content__name">{goodsDetail.cartoon_store_store_name}</View>
                <View className="shop-content__address">
                  {goodsDetail.cartoon_store_store_address}
                </View>
              </View>
            </View>
            <View className="shop-phone" onClick={this.callPhone}>
              <Image src={phoneIcon} />
              电话
            </View>
          </View>
          <View className="goods-info section">
            <View className="goods-info__title">— 商品详情 —</View>
            <View className="rech-text">
              {goodsDetail.cartoon_goods_detail && (
                <RichText content={goodsDetail.cartoon_goods_detail || ''} />
              )}
            </View>
          </View>
        </View>
        <BottomBtns buyText="立即购买" onBuy={this.onBuy} />
      </View>
    );
  }
}
